<template>
	<div id="tra">
		<hr style="height:1px;border:none;border-top:1px solid #555555;" />
		<el-row>
			<div id="top">
				<div id="tratop-left1">
					<el-button type="info" icon="el-icon-receiving" size="small">打印</el-button>
				</div>
				<div id="tratop-left1">
					<el-button type="info" icon="el-icon-plus" size="small" @click="addtransfer">调库</el-button>
				</div>
				<div id="tratop-left1">
					<el-button type="info" icon="el-icon-edit" size="small" @click="dialogFormVisible = true">修改</el-button>
				</div>
				<div id="tratop-left1">
					<el-button type="info" icon="el-icon-delete" size="small" @click="dialogFormVisible = true">删除</el-button>
				</div>
				<div id="tratop-left1">
					<el-button type="info" icon="el-icon-refresh" size="small" @click="winReload">刷新</el-button>
				</div>
			</div>
		</el-row>
		<el-row>
			<div id="trhead-left1">
				查询方案
				<el-select v-model="value1" clearable placeholder="请选择">
					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div id="trhead-left2">
				产品查询:
			</div>
			<div id="trhead-left1">
				<el-input placeholder="请输入内容" v-model="search" prefix-icon="el-icon-search">
				</el-input>
			</div>
		</el-row>
		<el-row>
			<div align="center">
				<el-table :data="tableData.filter(data => !search ||data.proId.toLowerCase().includes(search.toLowerCase()))"
				 style="width: 98%" height="600" :default-sort="{prop: 'traId', order: 'descending'}" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
					<el-table-column fixed prop="traStatic" label="状态" sortable width="100">
					</el-table-column>
					<el-table-column fixed prop="traId" label="编号" sortable width="100">
					</el-table-column>
					<el-table-column fixed prop="proId" label="产品名称" sortable width="140">
					</el-table-column>
					<el-table-column prop="traDate" label="单据时间" sortable width="140">
					</el-table-column>
					<el-table-column prop="traOut" label="出库仓库" sortable width="140">
					</el-table-column>
					<el-table-column prop="traIn" label="入库仓库" sortable width="140">
					</el-table-column>
					<el-table-column prop="proNum" label="数量" sortable width="100">
					</el-table-column>
					<el-table-column prop="traZdy" label="制单员" :formatter="formatter1" width="120">
					</el-table-column>
					<el-table-column prop="traSdy" label="审核员" :formatter="formatter2" width="120">
					</el-table-column>
					<el-table-column prop="traNote" label="调拨原因备注" :formatter="formatter3" width="200">
					</el-table-column>
					<el-table-column align="right" width="240">
						<template slot-scope="scope">
							<el-button size="mini" @click="staticEdit(scope.$index, scope.row)">审核</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog title="仓库调拨" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="100px">
					<el-form-item label="产品名称">
						<el-select v-model="form.proId" clearable placeholder="请选择">
							<el-option v-for="item in product" :key="item.proId" :label="item.proName" :value="item.proName">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="出库仓库">
						<el-select v-model="form.traOut" placeholder="请选择">
							<el-option v-for="item in warehouse" :key="item.warId" :label="item.warName" :value="item.warName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="入库仓库">
						<el-select v-model="form.traIn" placeholder="请选择">
							<el-option v-for="item in warehouse" :key="item.warId" :label="item.warName" :value="item.warName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数量">
						<el-input-number v-model="form.proNum" :min="1" :max="2000" label="描述文字"></el-input-number>
					</el-form-item>
					<el-form-item label="单位">
						<el-input v-model="form.inbUnit" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="制单员">
						<el-input v-model="form.traZdy" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="审核员">
						<el-input v-model="form.traSdy" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" :rows="3" v-model="form.traNote" autocomplete="off" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="height: 50px;">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button v-show="!isedit" type="primary" @click="sureAddTransfer">确 定</el-button>
					<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
				</div>
			</el-dialog>
		</el-row>
		<el-row>
			<div align="center" style="margin-top: 20px;">
				<el-pagination background layout="prev, pager, next" :total="200"></el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				proNum: 1,
				options1: [{
					value: '选项1',
					label: '默认查询'
				}, {
					value: '选项2',
					label: '本年查询'
				}, {
					value: '选项3',
					label: '本月查询'
				}, {
					value: '选项4',
					label: '本周查询'
				}, {
					value: '选项5',
					label: '本日查询'
				}],
				value1: '默认查询',
				search: '',
				product:[],
				warehouse:[],
				tableData:[],
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					proId: '',
					traOut: '',
					traIn: '',
					proNum: '',
					inbUnit:'',
					traZdy: '',
					traSdy: '',
					traNote: ''
				},
				//选择种类
				types1: [],
				types2: [],
				isedit: false,
				myindex: -1
			}
		},
		mounted(){
			var _this = this;
			this.$axios.post("findtransfer").then(res=>{
				if(res.data){
					_this.tableData = res.data.transfer;
					_this.warehouse = res.data.warehouse;
					_this.product = res.data.product;
				}else{
						alert("出错了！！");
					}
				
			}).catch(ex=>{
				alert("出错了8888");
			})
		},
		methods: {
			formatter1(row, column) {
				return row.traZdy;
			},
			formatter2(row, column) {
				return row.traSdy;
			},
			formatter3(row, column) {
				return row.traNote;
			},
			add() {
				this.dialogFormVisible = true;
			},
			addtransfer(){
				this.form={
					proId: '',
					traOut: '',
					traIn: '',
					traNum: '',
					inbUnit:'',
					traZdy: '',
					traSdy: '',
					traNote: ''
				}
				this.dialogFormVisible = true;
			},
			sureAddTransfer() {
				//确认添加
				this.$axios.post("addtransfer",this.form).then(v=>{
					console.log(v)
					if(v.data){
						this.key2=v.data.ans;
								if(this.key2=='y'){
									alert("调库成功！！");
									this.$router.push("/transfers");
								}else{
									alert("调库失败,产品不存在!!");
								}
						}else{
							alert("出错了！！");
						}
				}).catch(ex=>{
					alert("出错了！"+ex);
				})
				this.dialogFormVisible = false;
				this.tableData.push(this.form);
			},
			sureUpdate: function() {
				//根据form.id确认要修改的webs的id值
				this.tableData.splice(this.myindex, 1, this.form);
				//确认修改
				this.dialogFormVisible = false;
				this.isedit = false; //修改状态结束
			},
			//审核
			staticEdit(index, row) {
				var _this = this;
				this.$confirm(
					"确认审核["+row.inbId+"]单据吗",
					"温馨提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {				
					this.$axios.post("trapass?traId=" + row.traId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("审核通过");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//根据form.id确认要修改的webs的id值
					this.tableData.splice(this.myindex, 1, this.row);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})
			
			},
			//刷新页面
			winReload: function(cond) {
				this.$router.go(0);
			},
		}
	}
</script>

<style>
	#tra {
		margin: 5px 15px 5px 15px;
	}

	#top {
		width: 100%;
		height: 50px;
		border: 1px solid #FF0000;
	}

	#trhead-left1 {
		margin: 10px 15px 8px 5px;
		float: left;
	}

	#trhead-left2 {
		margin-top: 18px;
		float: left;
	}

	#tratop-left1 {
		width: 50px;
		margin-top: 7px;
		margin-left: 40px;
		float: left;
	}
</style>
